/*
 * @Author: your name
 * @Date: 2021-05-09 07:44:56
 * @LastEditTime: 2021-05-12 07:53:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \api\lib\pages\apis\container\container_home_page.dart
 */
import 'package:flutter/material.dart';

class ContainerHomePage extends StatefulWidget {
  @override
  _ContainerHomePageState createState() => _ContainerHomePageState();
}

class _ContainerHomePageState extends State<ContainerHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Container'),
      ),
      body: Center(
        // container 的外层有限制大小 container启用的是外层限制的大小
        child: Container(
          width: 200,
          height: 200,
          // EdgeInsets.all() 上下左右
          // EdgeInsets.only(left:x,right:x0,top:x,bottom:x) 定制
          padding: EdgeInsets.only(left: 10, right: 20, top: 0, bottom: 5),
          alignment: Alignment(0, 0),
          // color: Colors.red, decoration与color冲突 二选一
          decoration: BoxDecoration(
            color: Colors.red,
            border: new Border.all(
                //  边框颜色
                color: Colors.deepPurple,
                // 边框的线宽
                width: 2.0,
                // 边框的样式
                style: BorderStyle.solid),
            // BorderRadius.circular(20), 四个角
            // BorderRadius.vertical(top:Radius.elliptical(20, 20),bottom:Radius.elliptical(15,15)) 设置上下的圆角
            // BorderRadius.horizontal(left:Radius.elliptical(20, 20),right:Radius.elliptical(15,15)), 设置左右的圆角
            // BorderRadius.only( topLeft: Radius.elliptical(20, 20), bottomRight: Radius.elliptical(10, 10)), 设置单个 上下左右

            // borderRadius: BorderRadius.only(
            //   topLeft: Radius.elliptical(20, 20),
            //   bottomRight: Radius.elliptical(10, 10),
            // ),
            // 设置contaienr的形状
            // 当shape取值 BoxShape.circle 不能设置borderRadius
            shape: BoxShape.rectangle,
            // container颜色的填充模式
            // gradient: LinearGradient(
            //   // 配置颜色组
            //   colors: [Colors.blue, Colors.yellow, Colors.deepPurple],
            //   // 配置渐变方向
            //   begin: Alignment.topLeft,
            //   end: Alignment.bottomRight,
            // ),
            // gradient: RadialGradient(
            //   // 颜色组
            //   colors: [Colors.blue, Colors.yellow, Colors.deepPurple],
            //   // 中心位置
            //   center: Alignment.centerLeft,
            //   // 半径 默认0.3
            //   radius: 0.2,
            //   // 配置填充模式
            //   // TileMode.mirror 镜像颜色
            //   // TileMode.clamp 取最近的颜色填充
            //   // TileMode.repeated 重复填充
            //   tileMode: TileMode.clamp,
            // ),
            // 扫描
            gradient: SweepGradient(
              // 颜色组
              colors: [Colors.blue, Colors.yellow, Colors.deepPurple],
            ),
            // 设置阴影
            boxShadow: [
              BoxShadow(
                color: Colors.black, // 阴影的颜色
                offset: Offset(10, 10), // 阴影偏移量
                blurRadius: 20, // 模糊的清晰度
                spreadRadius: 10, // 层大小
              )
            ],
          ),
          // child: Container(
          //     // width: 100,
          //     // height: 100,
          //     alignment: Alignment(0, 0),
          //     color: Colors.green,
          //     child: SizedBox(
          //       width: 50,
          //       height: 50,
          //       child: Text('sizeBox'),
          //     )),
        ),
      ),
    );
  }
}
